<template>
  <el-dialog
    v-model="visible"
    :fullscreen="isFullscreen"
    modal-class="houser_detail-dialog"
    :show-close="false"
    append-to-body
    destroy-on-close
    width="80%"
    align-center
    @close="handleClose"
  >
    <template #header>
      <div class="flex-x-between">
        <span>改造户型图</span>
        <div class="dialog-toolbar">
          <div class="flex-inline flex-center mr-10">
            <el-text class="mx-1">日志自动刷新：</el-text>
            <el-switch v-model="logAutoRefresh" />
          </div>

          <el-button circle @click="toggleFullscreen">
            <SvgIcon v-if="isFullscreen" icon-class="fullscreen-exit" />
            <SvgIcon v-else icon-class="fullscreen" />
          </el-button>

          <el-button circle @click="handleClose">
            <template #icon>
              <Close />
            </template>
          </el-button>
        </div>
      </div>
    </template>

    <el-row :gutter="20">
      <el-col :span="10">
        <UserHouse ref="userHouseRef" :user-id="userId" :draggable="false" />
      </el-col>

      <!-- 设备的日志记录 -->
      <el-col :span="14">
        <UserHouseDeviceLogs :user-id="userId" :auto-refresh="logAutoRefresh" />
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script setup lang="ts">
import UserHouse from "../UserHouse/UserHouse.vue";
import UserHouseDeviceLogs from "../UserHouseDeviceLogs/UserHouseDeviceLogs.vue";

defineOptions({
  name: "DialogHouseDetail",
});
const userHouseRef = ref();
const visible = ref(false);
const isFullscreen = ref(false); // 控制全屏状态
const userId = ref();
const logAutoRefresh = ref(true);

// 切换全屏
const toggleFullscreen = () => {
  isFullscreen.value = !isFullscreen.value;
  nextTick(() => {
    userHouseRef.value.updatePanelSize();
  });
};

// 关闭弹窗
const handleClose = () => {
  visible.value = false;
  nextTick(() => {
    userHouseRef.value.updatePanelSize();
  });
};

/**
 * @description 打开弹窗
 * @param id
 */
const open = async (id: number) => {
  userId.value = id;
  visible.value = true;
};

defineExpose({
  open,
});
</script>
